<template>
  <div>
    app
    <button @click="changeTitle">修改title</button>
<!-- 1.计数器 -->
<!-- <Home></Home>
  <hr />
  <About></About> -->

  <!-- 2.home和about页面的切换 -->
  <button @click="currentPage = 'Home'">home</button>
  <button @click="currentPage = 'About'">about</button>
  <component :is="currentPage"></component>
  <div class="content">content</div>
  <br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
</div>

</template>
<script>
import { reactive ,ref} from 'vue'
import Home from './views/Home.vue';
import About from './views/About.vue';
import useTitle from './hooks/useTitle'
    export default {
        components:{Home,About},
        setup(){
            // document.title='你好'
            const currentPage = ref('Home')
            const changeTitle = ()=>{
                useTitle('app title')
            }
                return{
                    changeTitle,
                    currentPage
                }
        }
    }
</script>
<style scoped>
/*局部css 支持css3 可以改变elementUI组件的样式 且组件样式调整只在本页面生效**/
/*主样式*/
.content{
    width: 3000px;
    background-color: orange;
}
</style>
